<template>
	<div class="app-home-container">
		<div class="content">
			<h1>itshizhan.com</h1>
			<h2>学英语向左,&nbsp;学编程向右</h2>
			<div class="menu">
				<p class="left" @click="goto(1)" >
					<arrow-circle-left theme="filled" size="34" fill="#141414" />
					我要记单词
				</p>
				<p class="right" @click="goto(2)">
					我要学编程
          <arrow-circle-right theme="filled" size="34" fill="#141414" />
				</p>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { ArrowCircleLeft, ArrowCircleRight } from "@icon-park/vue-next";
import { useRouter } from "vue-router";
export default defineComponent({
	name: "Home",
	components: {
		ArrowCircleLeft,
		ArrowCircleRight,
	},
	setup() {
		const router = useRouter();
		const goto = (id: string | number) => {
			if (id == 1) {
				router.push({
					path: "itjidanci",
				});
			} else if (id == 2) {
				router.push({
					path: "aicoding",
				});
			}
		};
		return {
			goto,
		};
	},
});
</script>

<style lang="scss">
.app-home-container {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #282e35;
	width: 100vw;
	height: 100vh;
	.content {
		width: 400px;
		height: 200px;
		text-align: center;
	}
	h1 {
		font-size: 30px;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		font-style: italic;
	}
	h2 {
		font-size: 30px;
		font-weight: bold;
		color: #888888;
		margin-top: 20px;
		text-align: center;
	}
	.menu {
		color: #ffffff;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		padding: 8px 50px;
		span.i-icon {
			display: inline-block;
			vertical-align: middle;
		}
		p.left,
		p.right {
			cursor: pointer;
			transition: all 0.5s;
		}
    p.left {
      background: #f90000;
      padding: 1px 8px;
      border-radius: 6px;
      &:hover {
				background: #101010;
				padding: 1px 8px;
				border-radius: 6px;
			}
    }
    p.right {
      background: #0898ff;
      padding: 1px 8px;
      border-radius: 6px;
      &:hover {
				background: #101010;
				padding: 1px 8px;
				border-radius: 6px;
			}
    }
	}
}
</style>
